@import "../../../assets/styles/img.less";

.course-empty{
  margin-top: 148rpx;
  margin-bottom: 148rpx;
  background-image: @no-data_gray;
  background-size: 200rpx;
  .no-data-text{
    bottom:60rpx
  }
}
page {
  background: #fff;
}
.video-item {
  width: 100%;
  height: 422rpx;
  z-index: 11;
}
.scroll-view {
  width: 100%;
  height: calc(100% - 422rpx);
}
.info-wrap {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  .icon-quanbu {
    display: inline-block;
    // vertical-align: top;
    padding-left: 10rpx;
    font-size: 16rpx;
    // transition: all 0.3s;
  }
  .icon-quanbu-collapse {
    transform: rotate(-90deg);
  }

  .title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
  }
  .count {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #858b9c;
    line-height: 26rpx;
  }
  .description-wrap {
    display: flex;

    .description {
      width: 100%;
      margin-top: 20rpx;
      // display: -webkit-box;
      // -webkit-line-clamp: 2;
      // -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      font-size: 28rpx;
      color: #858b9c;
      line-height: 40rpx;
      line-height: 1.5;
      max-height: 3em;
      position: relative;
      .ellipsis{
        color: #858b9c;
      }
      &::before {
        content: "";
        float: right;
        width: 0;
        height: calc(100% - 33rpx);
      }
      &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
      }
      .btn {
        float: right;
        clear: both;
        font-size: 28rpx;
        color: #4661f4;
        line-height: 26rpx;
      }
    }
    .description-no-ellipsis {
      -webkit-line-clamp: 99;
      max-height: none;
      &::after {
        display: none;
      }
    }
  }
  .description-btn {
    padding-bottom: 40rpx;
    margin-top: 16rpx;
    border-bottom: 1px solid rgba(230, 238, 249, 1);
    text-align: right;
    font-size: 28rpx;
    color: #4661f4;
    line-height: 26rpx;
  }
  .scene-wrap {
    margin-top: 40rpx;
    padding-bottom: 40rpx;
    border-bottom: 1px solid rgba(230, 238, 249, 1);
    .title {
      margin-bottom: 20rpx;
      font-size: 32rpx;
      line-height: 34rpx;
    }
    .scene-list {
      .scene-item {
        position: relative;
        width: 100%;
        height: 130rpx;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        border: 1px solid #e7edf8;
        border-radius: 20rpx;
        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
        .left {
          font-size: 32rpx;
          color: #41485d;
          line-height: 34rpx;
        }
        .right {
          .iconfont {
            color: rgba(70, 97, 244, 1);
            font-size: 25rpx;
          }
        }
      }
    }
    .btn {
      text-align: center;
      font-size: 28rpx;
      color: #4661f4;
      line-height: 40rpx;
    }
    .open{
      transform: rotate(180deg);
    }
  }
  .comment-wrap {
    margin-top: 40rpx;
    .title {
      margin-bottom: 20rpx;
      font-size: 32rpx;
      line-height: 34rpx;
    }
    .comment-list {
      .comment-item {
        display: flex;
        padding-top: 44rpx;
        padding-bottom: 40rpx;
        border-bottom: 1px solid rgba(230, 238, 249, 0.7);
        .left {
          margin-right: 24rpx;
          .avatar {
            width: 65rpx;
            height: 65rpx;
            border-radius: 50%;
          }
        }
        .right {
          .top {
            .name {
              margin-bottom: 13rpx;
              font-size: 26rpx;
              color: #333333;
              line-height: 24rpx;
            }
            .time {
              font-size: 24rpx;
              color: #bbbbbb;
              line-height: 20rpx;
            }
          }
          .bottom {
            margin-top: 17rpx;
            .content {
              font-size: 28rpx;
              color: #333333;
              line-height: 42rpx;
            }
          }
        }
      }
    }
  }
}
.outer-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  .input-wrap {
    padding: 32rpx 30rpx;
    display: flex;
    align-items: center;
    background: #fff;

    .iconfont {
      color: rgba(4, 0, 0, 1);
    }
    .input {
      display: flex;
      align-items: center;
      padding: 0rpx 26rpx;
      margin-right: 30rpx;
      width: 540rpx;
      height: 76rpx;
      background: rgba(245, 245, 245, 0.65);
      border-radius: 35rpx;
      .input-content {
        height: 100%;
        flex: 1;
        margin-left: 12rpx;
        font-size: 24rpx;
      }
      .iconfont {
        flex: 0;
      }
      .input-content-placeholder {
        font-size: 24rpx;
      }
    }
    .send-btn {
      width: 130rpx;
      height: 70rpx;
      background: linear-gradient(135deg, #7489f6, #4761f4 99%);
      border-radius: 35rpx;
      font-size: 26rpx;
      text-align: center;
      color: #ffffff;
      line-height: 70rpx;
    }
  }
  .line {
    height: env(safe-area-inset-bottom);
  }
}
.fixed-place-line {
  width: 100%;
  height: 140rpx;
}
.input-content-active {
  position: relative;
}
